<script setup lang="ts">
import { useToolsStore } from '../store/tools'
import BentoGrid from '../components/BentoGrid.vue'

const toolsStore = useToolsStore()
</script>

<template>
  <div>
    <header class="p-4 bg-white dark:bg-gray-800 shadow-sm dark:shadow-gray-700/20">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">我的收藏</h1>
      <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
        快速访问您收藏的工具
      </p>
    </header>

    <div class="p-4">
      <template v-if="toolsStore.getFavorites.length">
        <BentoGrid :tools="toolsStore.getFavorites" />
      </template>
      <template v-else>
        <div class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400">
          <div class="text-6xl mb-4">⭐️</div>
          <p class="mb-4">还没有收藏任何工具</p>
          <n-button type="primary" @click="$router.push('/')">
            去浏览工具
          </n-button>
        </div>
      </template>
    </div>
  </div>
</template> 